<script setup lang="ts">
import type { InputTypeHTMLAttribute } from "vue";

const modelValue = defineModel<any>();
defineProps<{
  label?: string;
  type?: InputTypeHTMLAttribute;
  required?: boolean;
  placeholder?: string;
}>();
</script>

<template>
  <label class="block">
    <div>{{ label }} <span v-if="required" class="text-red-600">*</span></div>
    <div>
      <input
        class="focus:outline-none border block w-full px-2 py-1"
        v-model="modelValue"
        :type="type"
        :required="required"
        :placeholder="placeholder"
      />
    </div>
  </label>
</template>
